<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <!--  分类  -->
    <div class="data_type_div paddingDiv">
      <el-button style="border-radius: 30px" size="small">分类</el-button>
      <span style="margin-left: 20px">{{ typeName }}</span>
      <el-divider></el-divider>
      <el-button style="border-radius: 30px" size="small">类型</el-button>
      <el-radio-group v-model="radio2" style="margin-left: 20px;" size="mini" @change="changeRadio1">
        <el-radio-button :label="0">全部</el-radio-button>
        <el-radio-button v-for="item in radioData2" :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
      </el-radio-group>
      <el-divider></el-divider>
      <el-button style="border-radius: 30px" size="small">时间</el-button>
      <el-date-picker
        size="mini"
        style="margin-left: 20px"
        v-model="value1"
        type="daterange"
        :editable="false"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期" @change="changeRadio1">
      </el-date-picker>
      <el-input
        style="width: 200px;margin-left: 20px"
        size="mini"
        v-model="queryParams.name"
        placeholder="请输入标题"
        clearable
        @keyup.enter.native="changeRadio1"
      />
      <el-button type="primary" icon="el-icon-search" size="mini"
                 style="margin-left: 20px;" @click="changeRadio1">搜索
      </el-button>
    </div>
    <!--  列表数据  -->
    <div class="data_div">
      <el-row :gutter="24">
        <el-col :span="6" v-for="item in shopData" :key="item.id">
          <el-card shadow="hover" style="margin-bottom: 20px;height: 412px;cursor: pointer;"
                   @click.native="goDetails(item.id)">
            <img class="image" :src="'/dev-api'+item.img" style="height: 200px;">
            <div style="padding: 14px;">
              <div style="height: 37px;">
                <span><el-link>{{ item.name }}</el-link></span>
              </div>
              <el-divider content-position="left">
                <el-link type="danger" :underline="false">
                  <DictLink v-for="dict in typeDataList"
                            v-if="dict.dictType == item.type"
                            :dictType="item.type"
                            :value="item.typeData"/>
                </el-link>
              </el-divider>
              <time class="time">{{ item.addTime }}</time>
              <div class="bottom moreLine">
                {{ item.introduce }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-pagination
        align="center"
        small
        layout="prev, pager, next"
        v-show="total>0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="getCardList"
      />
    </div>
    <PcFooter/>
    <PcUp/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'
import headTop from '../../components/myComponents/components/top/index'
import PcHeader from '../../components/myComponents/components/header/index'
import PcCarousel from '../../components/myComponents/components/carousel/index'
import PcCard from '../../components/myComponents/components/pc_card/index'
import PcFooter from '../../components/myComponents/components/pc_footer/index'
import PcUp from '@/components/myComponents/components/pc_up/index'
import {listGongGao, listRoom} from "@/api/pc";
import {getType, optionselect} from "@/api/system/dict/type";
import {getDicts} from "@/api/system/dict/data";

export default {
  name: 'dataList',
  components: {
    headTop,
    PcHeader,
    PcCarousel,
    PcCard,
    PcFooter,
    PcUp
  },
  data() {
    return {
      typeInfo: '',
      radio1: '0',
      typeName: '',
      radioData1: [],
      radio2: '0',
      radioData2: [],
      shopData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        type: null,
        typeData: null,
        name: null
      },
      value1: '',
      typeDataList: [],
    }
  },
  watch: {
    $route() {
      this.typeInfo = this.$route.query.type
      this.radio2 = "0"
    },
    typeInfo() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 8,
        type: null,
        typeData: null,
      }
      this.getDataInfo()
    }
  },
  created() {
    if (this.$route.query.type) {
      this.typeInfo = this.$route.query.type
      this.getDataInfo()
    }
    this.getTypeData()
  },
  methods: {
    getTypeData() {
      optionselect().then(res => {
        this.typeDataList = res.data
      })
    },
    getDataInfo() {
      getType(this.typeInfo).then(res => {
        this.typeName = res.data.dictName;
        this.queryParams.type = res.data.dictType;
        getDicts(res.data.dictType).then(respone => {
          this.radioData2 = respone.data
        })
        this.getCardList();
      })
    },
    getCardList() {

    },
    getCountNight() {
      this.$modal.msgError(this.value1)
    },
    goDetails(id) {
      this.$router.push({path: '/pc/details', query: {id: id}})
    },
    changeRadio1() {
      this.queryParams.typeData = this.radio2
      if (this.radio2 == 0) {
        this.queryParams.typeData = null
      }
      if (this.value1) {
        this.queryParams.params = {};
        if (null != this.value1 && '' != this.value1) {
          this.queryParams.params["beginAddTime"] = this.value1[0];
          this.queryParams.params["endAddTime"] = this.value1[1];
        }
      } else {
        this.queryParams.params = {};
      }
      this.getCardList();
    },
    yuDing() {
      this.$modal.msgSuccess("操作")
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}
</script>

<style scoped>
.data_type_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 355px;
  width: 1210px;
}

.data_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0px 355px;
  width: 1210px;
  height: 100%;
  padding: 16px;
}

.paddingDiv {
  padding: 16px;
}

.paddingDiv {
  padding: 16px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 24px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.moreLine {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

</style>
